import React from 'react';
import { NavLink } from 'react-router-dom';
import { Rate } from 'antd';
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
import Page from './Page';


import styles from './index.module.less';

export default class Tab extends React.Component {
  state={
    active: true,
    value: 3,
    values: 0,
    details: [
      {
        key: 1,
        name: '密度',
        info: '0.96',
      },
      {
        key: 2,
        name: '密度',
        info: '0.96',
      },
      {
        key: 3,
        name: '密度',
        info: '0.96',
      },
      {
        key: 4,
        name: '密度',
        info: '0.96',
      },
      {
        key: 5,
        name: '密度',
        info: '0.96',
      },
      {
        key: 6,
        name: '密度',
        info: '0.96',
      },
      {
        key: 7,
        name: '密度',
        info: '0.96',
      },
      {
        key: 8,
        name: '密度',
        info: '0.96',
      },
      {
        key: 9,
        name: '密度',
        info: '0.96',
      },
      {
        key: 10,
        name: '密度',
        info: '0.96',
      },
      {
        key: 11,
        name: '密度',
        info: '0.96',
      },
    ],
    detail: [
      {
        key: 1,
        value: 5,
        path: require('../../../../asset/images/market/1.png'),
      },
      {
        key: 2,
        value: 5,
        path: require('../../../../asset/images/market/1.png'),
      },
    ],
    reply: [
      {
        key: 1,
        value: 5,
        show: true,
        path: require('../../../../asset/images/market/1.png'),
      },
      {
        key: 2,
        value: 5,
        show: false,
        path: require('../../../../asset/images/market/1.png'),
      },
    ],
    KindNameInfo: [
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '1', path: require('../../../../asset/images/market/1.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: '废旧铅板铅皮铅块回收 废旧铅板铅皮铅块回...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '2', path: require('../../../../asset/images/market/2.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '3', path: require('../../../../asset/images/market/3.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '4', path: require('../../../../asset/images/market/4.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '5', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '6', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '7', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '8', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '9', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '10', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '11', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '12', path: require('../../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
    ],
  };
  tabClickOne() {
    this.setState(prevState => ({
      active: false,
    }));
  }
  tabClickTwo() {
    this.setState(prevState => ({
      active: true,
    }));
  }
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  render() {
    const { active, details, detail, KindNameInfo, value, values, reply } = this.state;

    return (
      <div className={styles.tab}>
        <div className={styles.tabs}>
          <div
            className={styles.pullLeft + ' ' + styles.tabs1}
            style={{
              background: active !== null && active ? '#ffffff' : '#ff8000',
              color: active !== null && active ? '#333333' : '#ffffff',
            }}
            onClick={this.tabClickOne.bind(this)}
          >
            商品详情
          </div>
          <div
            className={styles.pullLeft + ' ' + styles.tabs1}
            style={{
              background: active !== null && active ? '#ff8000' : '#ffffff',
              color: active !== null && active ? '#ffffff' : '#333333',
            }}
            onClick={this.tabClickTwo.bind(this)}
          >
            评价
          </div>
        </div>
        <div className={styles.content}>
          <div
            className={styles.content1}
            style={{
              display: active !== null && active ? 'none' : 'block',
            }}
          >
            <div className={styles.parameter}>
              <div className={styles.parameterInfo}>
                <div className={styles.info}>参数说明</div>
              </div>
              <div className={styles.parameterDetails}>
                <React.Fragment>
                  {
                    details.map(item => {
                      return (
                        <div className={styles.parameterDetails1 + ' ' + styles.pullLeft} key={item.key}>
                          <span className={styles.spanLeft}>
                            {item.name}
                          </span>
                          <span>
                            {item.info}
                          </span>
                        </div>
                      );
                    })
                  }
                </React.Fragment>
              </div>
            </div>
            <div className={styles.showDetail}>
              <div className={styles.showInfo}>
                <div className={styles.info}>细节展示</div>
              </div>
              <div className={styles.imgs}>
                <React.Fragment>
                  {
                    detail.map(item => {
                      return (
                        <img src={item.path} alt="" key={item.key}/>
                      );
                    })
                  }
                </React.Fragment>
              </div>
            </div>
          </div>
          <div
            className={styles.content1}
            style={{
              display: active !== null && active ? 'block' : 'none',
            }}
          >
            <div className={styles.evaluate}>
              <div className={styles.rate + ' ' + styles.clearfix}>
                <div className={styles.rates + ' ' + styles.pullLeft}>
                  <span className={styles.text}>满意度</span>
                  <span className={styles.value}>{ value }</span>
                  <span className={styles.Rates}>
                    <Rate allowHalf defaultValue={value} className={styles.star} disabled/>
                  </span>
                </div>
                <div className={styles.radio + ' ' + styles.pullLeft}>
                  <RadioGroup onChange={this.onChange} value={values}>
                    <Radio value={0}>全部</Radio>
                    <Radio value={5}>五星</Radio>
                    <Radio value={4}>四星</Radio>
                    <Radio value={3}>三星</Radio>
                    <Radio value={2}>二星</Radio>
                    <Radio value={1}>一星</Radio>
                  </RadioGroup>
                </div>
              </div>
              <div className={styles.reply}>
                <div className={styles.replyChildren}>
                  <React.Fragment>
                    {
                      reply.map(item => {
                        return (
                          <div className={styles.replyChild} key={item.key}>
                            <div className={styles.left + ' ' + styles.pullLeft}>
                              <div className={styles.img}>
                                <img src={item.path} alt="" />
                                <p>用户*****名</p>
                              </div>
                            </div>
                            <div className={styles.right + ' ' + styles.pullLeft}>
                              <div className={styles.up}>
                                <div className={styles.Rates}>
                                  <Rate allowHalf defaultValue={value} className={styles.star} disabled/>
                                </div>
                                <div>
                                  <span className={styles.text}>行业标准的基调已经定了，商务部公开征求意见，在完善具体细则的同时</span>
                                  <span className={styles.time}>2018年9月19日  12:12</span>
                                </div>
                              </div>
                              <div
                                className={styles.down}
                                style={{
                                  display: item.show !== null && item.show ? 'block' : 'none',
                                }}
                              >
                                <div className={styles.Rates}>
                                  <span className={styles.me}>大连塑料 回复:</span>
                                </div>
                                <div>
                                  <span className={styles.text}>谢您的评价~~~~~~~祝顺商祺</span>
                                  <span className={styles.time}>2018年9月19日  12:12</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        );
                      })
                    }
                  </React.Fragment>
                  <div className={styles.page + ' ' + styles.clearfix}>
                    <Page></Page>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.showOther}>
            <div className={styles.showOtherInfo}>
              <span className={styles.info}>店铺其他产品</span>
              <span className={styles.right}>
                <NavLink to='/'>
                  更多 >
                </NavLink>
              </span>
            </div>
            <div className={styles.showOtherDown}>
              <React.Fragment>
                {
                  KindNameInfo.map(KindNameInfo => {
                    return (
                      <div className={styles.KindNameInfo + ' ' + styles.pullLeft} key={KindNameInfo.index}>
                        <NavLink to="/" className={styles.img}>
                          <img src={KindNameInfo.path} alt="" />
                          <div className={styles.KindNameInfoNumber}>库存:{KindNameInfo.KindNameInfoNumber}</div>
                          <div className={styles.KindNameInfoText}>{KindNameInfo.KindNameInfoText}</div>
                        </NavLink>
                        <div className={styles.KindNamePrice}>
                          <div
                            className={styles.KindNamePriceLeft + ' ' + styles.pullLeft}>{KindNameInfo.KindNameInfoAdd}</div>
                          <div
                            className={styles.KindNamePriceRight + ' ' + styles.pullRight}>{KindNameInfo.KindNameInfoPrice}</div>
                        </div>
                      </div>
                    );
                  })
                }
              </React.Fragment>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
